<template>
  <div class="detail-page">
    <!-- 商品图片轮播 -->
    <van-swipe class="product-swipe" :autoplay="3000" indicator-color="#157658">
      <van-swipe-item v-for="(item, index) in spu?.spu_img_list" :key="index">
        <img :src="item.img" :alt="spu?.title" />
      </van-swipe-item>
    </van-swipe>

    <!-- 商品描述 -->
    <div class="product-description">
      <div class="left">
        <h2 class="title">{{ spu?.title }}</h2>
        <div class="tags" v-if="tags.length > 0">
          <van-tag 
            v-for="tag in tags" 
            :key="tag"
            type="primary" 
            color="#DCEBE6" 
            text-color="#157658"
            size="small"
          >
            {{ tag }}
          </van-tag>
        </div>
        <p class="subtitle">{{ spu?.subtitle }}</p>
        <div class="price-row">
          <span class="current-price">¥{{ formatPrice(spu?.discount_price || spu?.price) }}</span>
          <span v-if="spu?.discount_price" class="original-price">¥{{ formatPrice(spu?.price) }}</span>
          <van-tag 
            v-if="spu?.discount_price" 
            type="danger" 
            size="small"
            color="#c93756"
          >
            折扣
          </van-tag>
        </div>
      </div>
      <div class="right">
        <van-button 
          icon="share-o" 
          type="primary" 
          size="small"
          @click="onShare"
        >
          分享
        </van-button>
      </div>
    </div>

    <!-- 优惠券 -->
    <div v-if="coupons.length > 0" class="coupon-container" @click="onGoToCouponCenter">
      <div class="coupon-left">
        <div v-for="coupon in coupons" :key="coupon.id" class="coupon-mini">
          {{ coupon.title }}
        </div>
      </div>
      <div class="coupon-right">
        <span>立即领取</span>
        <van-icon name="arrow" color="#157658" />
      </div>
    </div>

    <!-- SKU选择 -->
    <div v-if="!specs.noSpec" class="sku-pending" @click="onAddToCart">
      <div class="specs">
        <span v-if="!specs.skuIntact" class="spec-label">请选择：</span>
        <span v-else class="spec-label">已选：</span>
        <span v-if="!specs.skuIntact" class="spec-value">{{ specs.missingKeys }}</span>
        <span v-else class="spec-value">{{ specs.currentValues }}</span>
      </div>
      <van-icon name="arrow" color="#157658" />
    </div>

    <!-- 销售说明 -->
    <div class="explain">
      <div v-for="explain in saleExplain" :key="explain.id" class="explain-item">
        {{ explain.text }}
      </div>
    </div>

    <!-- 商品详情图片 -->
    <div class="detail-img-container">
      <img 
        v-for="(item, index) in spu?.spu_detail_img_list" 
        :key="index"
        :src="item.img" 
        :alt="spu?.title"
        class="detail-img"
      />
    </div>

    <!-- 底部操作栏 -->
    <div class="tabbar">
      <div class="icons">
        <div class="icon-item" @click="onGotoHome">
          <van-icon name="home-o" size="24" />
          <span>首页</span>
        </div>
      </div>
      
      <!-- 所有商品统一显示购买按钮 -->
      <div class="buy-btn btn-font" @click="onBuy">
        <span>立即购买</span>
      </div>
    </div>

    <!-- SKU选择弹窗 -->
    <van-popup v-model:show="showRealm" position="bottom" round>
      <realm 
        :spu="spu"
        :order-way="orderWay"
        @shopping="onShopping"
        @specchange="onSpecChange"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getSpuDetail } from '@/api/home'
import { getTop2CouponsByCategory } from '@/api/coupon'
import { getSaleExplain } from '@/api/sale'
// 移除购物车store导入
import Realm from '@/components/realm/index.vue'

const route = useRoute()
const router = useRouter()
// 移除购物车store

// 响应式数据
const spu = ref(null)
const coupons = ref([])
const saleExplain = ref([])
const showRealm = ref(false)
const orderWay = ref('buy')
const specs = ref({
  noSpec: false,
  skuIntact: false,
  missingKeys: '',
  currentValues: ''
})

// 计算属性
const tags = computed(() => {
  if (!spu.value?.tags) return []
  return spu.value.tags.split('$')
})

// 格式化价格
const formatPrice = (price) => {
  if (!price) return '0.00'
  return parseFloat(price).toFixed(2)
}

// 获取商品详情
const getDetail = async () => {
  try {
    const pid = route.params.id
    const spuData = await getSpuDetail(pid)
    spu.value = spuData
    
    // 获取优惠券
    if (spuData.category_id) {
      const couponsData = await getTop2CouponsByCategory(spuData.category_id)
      coupons.value = couponsData || []
    }
    
    // 获取销售说明
    const explainData = await getSaleExplain()
    saleExplain.value = explainData || []
    
    // 移除购物车相关逻辑
  } catch (error) {
    console.error('获取商品详情失败:', error)
    showToast('获取商品详情失败')
  }
}

// 移除购物车相关方法

// 跳转到优惠券中心
const onGoToCouponCenter = () => {
  if (!spu.value?.category_id) return
  router.push({
    path: '/coupon',
    query: { 
      cid: spu.value.category_id,
      type: 'spu_category'
    }
  })
}

// 移除购物车功能，所有商品都直接购买

// 立即购买
const onBuy = () => {
  orderWay.value = 'buy'
  showRealm.value = true
}

// 购买操作 - 所有商品都直接跳转到支付凭证页面
const onShopping = (event) => {
  const { sku, skuCount } = event
  
  console.log('购买操作开始:', { sku, skuCount })
  
  if (sku.root_category_id === 5) {
    // VIP商品
    router.push({
      path: '/vip-order',
      query: {
        sku_id: sku.id,
        count: skuCount,
        way: 'buy'
      }
    })
  } else if (sku.root_category_id === 40) {
    // 积分商品
    router.push({
      path: '/points-order',
      query: {
        id: sku.id,
        count: skuCount
      }
    })
  } else {
    // 普通商品 - 现在也使用支付凭证支付
    router.push({
      path: '/vip-order',
      query: {
        sku_id: sku.id,
        count: skuCount,
        way: 'buy'
      }
    })
  }
  
  showRealm.value = false
}

// 规格变化
const onSpecChange = (event) => {
  specs.value = event
}

// 跳转到首页
const onGotoHome = () => {
  router.push('/home')
}

// 移除购物车跳转方法

// 分享
const onShare = () => {
  showToast('分享功能开发中')
}

// 组件挂载时获取数据
onMounted(async () => {
  await getDetail()
})
</script>

<style lang="scss" scoped>
.detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 100px;
}

.product-swipe {
  width: 100%;
  height: 300px;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.product-description {
  background: #fff;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  
  .left {
    flex: 1;
    
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
    
    .tags {
      margin-bottom: 10px;
      
      .van-tag {
        margin-right: 8px;
      }
    }
    
    .subtitle {
      font-size: 14px;
      color: #999;
      margin-bottom: 10px;
    }
    
    .price-row {
      display: flex;
      align-items: center;
      
      .current-price {
        font-size: 20px;
        font-weight: bold;
        color: #157658;
        margin-right: 10px;
      }
      
      .original-price {
        font-size: 16px;
        color: #999;
        text-decoration: line-through;
        margin-right: 10px;
      }
    }
  }
  
  .right {
    margin-left: 15px;
  }
}

.coupon-container {
  background: #fff;
  margin-top: 10px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .coupon-left {
    display: flex;
    
    .coupon-mini {
      background: #f0f9ff;
      color: #157658;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 10px;
    }
  }
  
  .coupon-right {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 14px;
  }
}

.sku-pending {
  background: #fff;
  margin: 10px 0;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .specs {
    .spec-label {
      color: #999;
      font-size: 14px;
    }
    
    .spec-value {
      color: #157658;
      font-size: 14px;
    }
  }
}

.explain {
  background: #fff;
  margin-top: 10px;
  padding: 15px;
  text-align: center;
  
  .explain-item {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }
}

.detail-img-container {
  margin-top: 10px;
  
  .detail-img {
    width: 100%;
    display: block;
  }
}

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  
  .icons {
    display: flex;
    margin-right: 15px;
    
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 20px;
      font-size: 12px;
      color: #666;
    }
  }
  
  .buy-btn {
    flex: 1;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    background: #ff3b30;
    font-weight: bold;
  }
}
</style> 